<template>
	<view class="">
		<view class="content">
			<ChooseLits :list="paixu" :arr="arr" @chooseLike="chooseLike"></ChooseLits>

		</view>
		<view class="" >
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
				<view class="example-body">
					<view class="example-box" v-for="designer in list" >
						<uni-card :is-shadow="false" :title="designer.name" mode="title" :thumbnail="designer.photo" :extra="'设计报价：'+designer.pricemini + '-' + designer.pricemax + '元/m²'  + '||' + '擅长：'+ designer.style"  note="true" >
							<view>
								<view class="image-box">
									<image class="image" mode="aspectFill" :src="designer.imgs[0].picPath" />
								</view>
							</view>
							<template slot="footer">
								<view class="footer-box">
									<view  @click="footerClick(designer.designerId)" ><text class="footer-box__item"> 查看详情</text></view>
								</view>
							</template>
						</uni-card>
					</view>
				</view>
				
			</s-pull-scroll>
		</view>
		
	</view>
		
</template>

<script>
	import ChooseLits from '../../components/choose-Cade/choose-Cade.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import uniCard from '../../components/uni-card/uni-card.vue'
	import uniSection from '../../components/uni-section/uni-section.vue'
	import sPullScroll from "../../components/s-pull-scroll/index.vue"
	export default {
		components: {uniCard, sPullScroll,uniSection, xflSelect,ChooseLits},
		data() {
			return {
				list:[],
				list1:[],
				num:0,
				paixu: ['设计风格', '设计报价'],
				arr: [
					['全部风格', '田园风格', '美式风格', '中式风格', '地中海风格'],
					['所有价格', '0-100', '100-199', '200-299','300-500'],
				],
				i2: [0, 0, 0],
				price:"所有价格",
				style:"全部风格"
			}
		},
		
		methods: {
				getDesigner(con, sty, pri){
					uni.request({
						url:"http://" + global.address + ":8081/designer/designerList1?id="+con+"&sty="+sty+"&pri="+pri,
						method:"GET",
						success:(designers) => {
							this.list1 = designers.data.list;
							this.num = designers.data.count;
							console.log(designers);
						}
					})
				},
			   refresh () {
			      this.$nextTick(() => {
			        this.$refs.pullScroll.refresh();
			      });
			    },
			    pullDown (pullScroll) {
			      setTimeout(() => {
			        this.loadData(pullScroll);
			      }, 200);
			    },
			    loadData (pullScroll) {
			      setTimeout(() => {
			        if (pullScroll.page == 0) {
			          this.list = [];
			        }
					 // var that = this;
			        // const curList = [];
					// this.getDesigner(this.list.length);
			    //     for (let i = this.list1.length; i < this.list1.length + 3; i++) {
			    //       curList.push(list1[i].data);
					  // console.log(curList); 
			    //     }
					this.list = this.list.concat(this.list1);
					this.getDesigner(this.list.length, this.style, this.price);
			        // this.list = this.list.concat(this.list1);
					// console.log("list" + this.list.length);
					// console.log("list的数据" + this.list);
					// console.log("num的数量" + this.num);
					console.log(1);
			        if (this.list.length >= this.num) {
			          // finish(boolean:是否显示finishText,默认显示)
			          pullScroll.finish(this.list.length > 5);
			        } else {
			          pullScroll.success();
			        }
					console.log(2);
					
			      }, 600);
			    },
				footerClick(type){
					console.log(type);
					uni.navigateTo({
						url:"/pages/desginerinfo/desginerinfo?id=" + type
					});
				},
				chooseLike(i1) {
					
					if (this.i2[i1[0]] != i1[1]) {
						this.i2[i1[0]] = i1[1];
						
					};
					if(i1[0] == 0){
						this.style = this.arr[i1[0]][i1[1]];
					}else{
						this.price = this.arr[i1[0]][i1[1]];
					}
					console.log('price: ' + this.price);
					console.log('style: ' + this.style);
					this.list = [];
					this.list1 = [];
					this.num = 0 ;
					this.getDesigner(this.list.length, this.style, this.price );
					this.refresh();
					
					// console.log('list1:' + this.list1);
					// console.log('list:' + this.list);
					// this.list = this.list.concat(this.list1);
					// console.log('list:' + this.list);
					
					
				},
			  },
			  onLoad () {
				this.getDesigner(this.list.length, this.style, this.price );
				this.refresh();
			  }
			 
		}
		
	
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
		/* #ifdef MP-TOUTIAO */
		@font-face {
			font-family: uniicons;
			font-weight: normal;
			font-style: normal;
			src: url('~@/static/uni.ttf') format('truetype');
		}
	
		/* #endif */
	
		/* #ifndef APP-NVUE */
		page {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #efeff4;
			min-height: 100%;
			height: auto;
		}
	
		view {
			font-size: 28rpx;
			line-height: inherit;
		}
	
		.example {
			padding: 0 30rpx 30rpx;
		}
	
		.example-info {
			padding: 30rpx;
			color: #3b4144;
			background: #ffffff;
		}
	
		.example-body {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			padding: 0;
			font-size: 14rpx;
			background-color: #ffffff;
		}
	
		/* #endif */
		.example {
			padding: 0 30rpx;
		}
	
		.example-info {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 30rpx;
			color: #3b4144;
			background-color: #ffffff;
			font-size: 30rpx;
		}
	
		.example-info-text {
			font-size: 28rpx;
			line-height: 36rpx;
		}
	
	
		.example-body {
			flex-direction: column;
			padding: 30rpx;
			background-color: #ffffff;
		}
	
		.word-btn-white {
			font-size: 18px;
			color: #FFFFFF;
		}
	
		.word-btn {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border-radius: 6px;
			height: 48px;
			margin: 15px;
			background-color: #007AFF;
		}
	
		.word-btn--hover {
			background-color: #4ca2ff;
		}
	
	
		.example-body {
			padding: 20rpx 0;
			padding-bottom: 0;
	
		}
	
		.example-box {
			/* margin-bottom: 30rpx;
	*/
		}
	
		.image-box {
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			height: 350rpx;
			overflow: hidden;
		}
	
		.image {
			/* #ifndef APP-NVUE */
			width: 100%;
			height: 100%;
			/* #endif */
			flex: 1;
		}
	
		.content-box {
			padding-top: 20rpx;
		}
	
		.content-box-text {
			font-size: 30rpx;
		}
	
		.footer-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: space-between;
			flex-direction: row;
	
		}
	
		.footer-box__item {
			align-items: center;
			padding: 10rpx 0;
			font-size: 30rpx;
			color: #666;
		}

</style>
